什麼是 Children Prop？

在 React 中，Children Prop 是每個 React 元件會自動接收的一個特殊屬性。

// 每個元件都會有一個名為 children 的 prop
function Button({ children }) {
  return (...)
}

Children Prop 是位於元件開始標籤和結束標籤之間的所有內容，這意味著我們可以將任何 JSX 標記傳遞給元件，然後該元件可以使用這些 JSX 標記並將其呈現。

// 放在元件標籤裡的內容就會被 Children Prop 接收
<Button>
  <span>Hello</span>
</Button>

使用 Children Prop

讓我們以一個實際的範例來說明為何需要使用 Children Prop，假設我們正在創建一個可重複使用的按鈕元件，它具有一些自定義的屬性，如文字顏色、背景顏色和事件處理。

// Button 元件
function Button({ textColor, bgColor, onClick, text }) {
  return (
    <button
	  style={{ backgroundColor: bgColor, color: textColor }}
	  onClick={onClick}
    >
	  {text}
    </button>
  )
}

當我們有高度客製化元件的需求，此時如果持續增加屬性的種類，那元件將會變得非常複雜。

// Button 元件
function Button({
  textColor,
  bgColor,
  onClick,
  text,
  leftEmoji,
  rightEmoji
}) {
  return (
    <button
	  style={{ backgroundColor: bgColor, color: textColor }}
	  onClick={onClick}
	>
	  {leftEmoji} {text} {rightEmoji}
	</button>
  )
}

這種時候我們就可以使用 Children Prop 來解決這個問題，在 Button 元件的開始標籤和結束標籤之間添加我們想要的內容，Button 元件裡面的 children 屬性就會接收這些內容。

// 在元件的開始結束標籤裡面添加想要的內容，包括 JSX 也可以
function App() {
  return (
    <Button
	  bgColor="#7950f2"
	  textColor="#ffffff"
	  onClick={handleClick}
	>
	  <span>⭐ Click 💼</span>
    </Button>
  )
}

// children 屬性接收外層傳入的內容 <span>⭐ Click 💼</span>
function Button({ textColor, bgColor, onClick, children }) {
  return (
    <button
	  style={{ backgroundColor: bgColor, color: textColor }}
	  onClick={onClick}
    >
	  {children}
    </button>
  )
}

結語

透過 Children Prop，我們能夠簡化元件的設計，同時保持元件的彈性，讓我們能夠輕鬆自定義內容，這是 React 開發中的一個重要技巧。